CSS 通用選取器 - 一個你我都該熟知的老朋友 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 8

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 8 篇

CSS 通用選取器 - 一個你我都該熟知的老朋友

11th鐵人賽 css教學 css 金魚網頁教學

CSScoke

2019-09-23 17:13:41

8170 瀏覽

分享至

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

CSS 通用選取器是一個新手入門必定會接觸到的選取器，每個網頁新手在接觸 CSS 時，多少都會聽過 CSS reset 這名詞，且多少都會聽說過使用星號（＊）來將所有網頁物件做 CSS reset 的技巧。但卻不見得每個人都聽說過通用選取器拿來做 CSS reset 曾被詬病說太過 over，但使用者仍然眾多，他是一個正反兩面評價不一的選取器，但也是一個便利至極的 CSS 選取器，現在就聽 Amos 娓娓道來吧

在那個瀏覽器的戰國時代

早期的瀏覽器大概就是個 IE、Firefox、Safari 三國鼎立卻不均等的時代，各家瀏覽器都有他自己內建的 CSS 樣式，但設定卻都不相同，導致設計師在網頁切版的時候會遇到畫面在Ｆ瀏覽器是好的，但是卻在Ｓ瀏覽器是壞的，然後Ｉ瀏覽器則是版本眾多，他本身就可以把自己的各個版本都弄壞了，~~所以是個壞掉的瀏覽器（阿！這樣說會不會得罪太多人）~~，正因為瀏覽器之間都有自己內建的 CSS 設定，所以後來網頁設計師為了解決這些瀏覽器畫面不同的問題，於是誕生了 CSS reset 這東西，CSS reset 的目的是將各家瀏覽器的內建 CSS 設定全部先覆寫一輪，把網頁的預設樣子變成大家都長一樣，例如你家的頁面邊界是用 padding，我家的頁面邊界是用 margin，乾脆大家全部都先設定成 padding: 0; Margin: 0，然後就大家都長一樣了，接下來再由設計師自己決定到底要用 padding 還是 margin 來做邊界的設定。時至今日這一類的問題依舊存在，所以切版人員在開發網頁的第一步還是會去做 CSS reset。

什麼都選！什麼都設定！什麼都長一樣！

由於 HTML 標籤眾多，所以每次製作 CSS reset 時，都要將一堆的 HTML 標籤都重置成大家都長一樣，所以通常我們會看到以下這種原始碼

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
...略

以上原始碼出自Eric A. and Kathryn S. Meyer 網站內的 CSS Tools: Reset CSS

從以上原始碼可以看到一堆的 HTML標籤被選取並重置，這樣的方式平白的增加了 CSS 檔案的大小，在早期那個時代，網路頻寬可是昂貴的很呢！網頁大小斤斤計較是非常正常且必要的！於是有人就想到了，要設定的項目這麼多，那為何不使用一個「*」通用選取器來設定不就好了嗎？通用選取器顧名思義，就是什麼都選！就跟萬磁王一樣！只要有含鐵，啥東西都能吸！通用選取器則是比萬磁王更厲害，他只要是網頁中的物件就通通都選到，但因為只要一個星號就能選到這大量的物件了，又快又省 code！所以上面這一大包的 CSS 設定就被開發者用以下幾行處理掉了

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
}

這可真是令人驚艷啊，原始碼變得超級乾淨呢！於是開始出現了大量使用這種方式做 CSS reset 的開發者。

開發者的覺醒

使用一段時間之後，開始有開發者發現了這樣的用法似乎太過頭了，怎麼說呢？因為一些完全沒有必要做 CSS reset 的網頁物件也被 reset 了，像是表單、清單、粗體斜體...等本該預設的外觀都被重置了，於是有開發者認為應該認真去搞懂各家瀏覽器到底他們內建的 CSS 哪邊有差異，然後只需要重置這些具備差異化的地方就好了，另一個 CSS reset 的檔案 Normalize.css 就這樣崛起了，而＊號這個通用選取器的使用者就開始減少了。

星號本無罪，只是被濫用

經歷過這麼長一段歷練之後，通用選取器的使用者大幅減少了，推崇 Normalize.css 的開發者變多了，瀏覽器種類也變少了(喂)，其實 CSS 選取器用在適合的地方就是正確的用法，在國外一篇文章『CSS Protips』中也有提到通用選取器的一些應用方式，各位可以參考看看這場直播對這些技巧的個人看法。各位又是如何看待的呢? 歡迎在下方留言分享討論喔。